<template>
	<div id="app">
		<!-- 头部 -->
		<HeaderModel />
		<!-- 内容区 -->
		<div class="mine-cont">
			<!-- 路由组件渲染 -->
			<router-view></router-view>
		</div>
		<!-- 尾部 -->
		<FooterModel />

		<!-- 返回顶部 -->
		<el-backtop>
			<div class="el-icon-arrow-up"></div>
		</el-backtop>
		<!-- 加载动画 -->
		<div class="route-loading" v-show="loadingShow"></div>
	</div>
</template>
<script>
import HeaderModel from "@/components/header/HeaderModel.vue";
import FooterModel from "@/components/FooterModel.vue";

export default {
	name: "App",
	data() {
		return {
			loadingShow: false,
		};
	},
	components: {
		HeaderModel,
		FooterModel,
	},
	created() {
		this.showLoading();
	},
	watch: {
		//监听路由，改变就重新显示加载层
		$route(newRoute) {
			newRoute;
			this.showLoading();
		},
	},
	methods: {
		// 遮罩层显示
		showLoading() {
			this.loadingShow = true;
			// 稍后关闭
			setTimeout(() => {
				this.loadingShow = false;
			}, 500);
		},
	},
};
</script>
<style lang="scss">
// 引入
@import "./assets/scss/color";
@import "./assets/scss/reset";
@import "./assets/scss/global";
#app {
	font-family: "微软雅黑", Avenir, Helvetica, Arial, sans-serif;
	color: #333;

	.el-backtop .el-icon-arrow-up {
		color: $mainColor;
	}
	.route-loading {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 999999;
		top: 0;
		left: 0;
		background: #eeeeee url(./assets/images/loading.jpg) no-repeat center center;
		opacity: 0.9;
	}
}
</style>
